<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<style>

	#supervisionAskList {
		position: relative;
	}

	#resNoRead {
		background-color: #d15b47 !important;
		margin: 10px 3px;
		color: #fff;
		position: absolute;
		top: -15px;
		right: -17px;
	}

	#superNoRead {
		background-color: #d15b47 !important;
		margin: 10px 3px;
		color: #fff;
		position: absolute;
		top: -15px;
		right: -17px;
	}

</style>
<%--流程图表--%>
<div id="flowChart" style="width: 860px;height: 400px;margin:30px 0;"></div>
<form:form commandName="taskjob" cssClass="form-horizontal" role="form" onsubmit="return false;">
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right  formsHead">任务详情：</label>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="taskName">任务名称</label>
		<div class="col-sm-4">
			<input type="text" name="taskName" id="taskName" placeholder="任务名称"
				   value="<c:out value="${taskjob.taskName}"/>"
				   title="<c:out value="${taskjob.taskName}"/>"
				   class="form-control ">
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="projectName">项目名称</label>
		<div class="col-sm-4">
			<input type="text" name="projectName" id="projectName" placeholder="项目名称"
				   value="<c:out value="${taskjob.projectName}"/>"
				   title="<c:out value="${taskjob.projectName}"/>"
				   class="form-control ">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="taskContent">督查事项详情</label>
		<div class="col-sm-10">
            <textarea rows="2" id="taskContent" name="taskContent" placeholder="督查事项详情"
					  class="form-control "> ${taskjob.taskContent}</textarea>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="aaa001">任务状态</label>
		<div class="col-sm-4">
			<input type="text" name="aaa001" id="aaa001" placeholder="任务状态"
			<c:if test="${taskjob.aaa001 == '0' }">
				   value="失效任务"
				   title="失效任务"
			</c:if>
			<c:if test="${taskjob.aaa001 == '1'}">
				   value="有效任务"
				   title="有效任务"
			</c:if>
				   class="form-control ">
		</div>
	</div>
	<c:if test="${taskjob.aaa001 == '0' }">
		<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="remarks">原因备注</label>
			<div class="col-sm-10">
            <textarea rows="2" id="remarks" name="remarks" placeholder="原因备注"
					  class="form-control "> ${taskjob.remarks}</textarea>
			</div>
		</div>
	</c:if>


	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="startDate">开始时间</label>
		<div class="col-sm-4">
			<input type="text" name="startDate" id="startDate" placeholder="暂无" value="${taskjob.startDate}"
				   autocomplete="off" class="form-control date-picker" readonly>
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="endDate">结束时间</label>
		<div class="col-sm-4">
			<input type="text" name="endDate" id="endDate" placeholder="暂无" value="${taskjob.endDate}"
				   autocomplete="off" class="form-control date-picker" readonly>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="planStartDate">计划开始时间</label>
		<div class="col-sm-4">
			<input type="text" name="planStartDate" id="planStartDate" placeholder="暂无"
				   autocomplete="off" value="${taskjob.planStartDate}" class="form-control date-picker" readonly>
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="planEndDate">计划结束时间</label>
		<div class="col-sm-4">
			<input type="text" name="planEndDate" id="planEndDate" placeholder="暂无" value="${taskjob.planEndDate}"
				   autocomplete="off" class="form-control date-picker" readonly>
		</div>
	</div>

	<div class="form-group input-no-wrap">
		<label class="col-sm-2 control-label no-padding-right" for="taskDate">任务完成时限</label>
		<div class="col-sm-4  input-group">
			<input type="number" name="taskDate" id="taskDate" placeholder="暂无" value="${taskjob.taskDate}"
				   class="form-control"><span class="input-group-addon">天</span>
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="responseTime">响应时间</label>
		<div class="col-sm-4 input-group" style="padding-left: 30px !important;width: 298px !important;">
			<input type="number" name="responseTime" id="responseTime" placeholder="响应时间"
				   value="${taskjob.responseTime}"
				   class="form-control "><span class="input-group-addon">天</span>
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="nodeId">节点ID</label>
		<div class="col-sm-4">
			<input type="text" name="nodeId" id="nodeId" placeholder="节点ID" value="${taskjob.nodeId}"
				   class="form-control ">
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="expirationDate">任务到期时间</label>
		<div class="col-sm-4">
			<input type="text" name="expirationDate" id="expirationDate" placeholder="暂无"
				   value="${taskjob.planEndDate}" class="form-control " readonly>
		</div>
	</div>


	<%--节点id的后台name  需修改为nodeNames--%>
	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="node-Name">节点名称</label>
		<div class="col-sm-4">
			<input type="text" name="nodeNames" id="node-Name" placeholder="节点名称"
				   value="<c:out value="${taskjob.nodeName}"/>"
				   class="form-control " title="<c:out value="${taskjob.nodeName}"/>">
		</div>
		<label class="col-sm-2 control-label no-padding-right">督查组别</label>
		<div class="col-sm-4">
			<select name="groupId" class="inspectorType form-control" multiple="multiple">

				<optgroup label="">
						<%-- <option> ${taskjob.groupType}</option>--%>

						<%--  <c:forEach items="${jobGroups}" var="jobGroups">
                              <option value="${jobGroups.groupCode}">${jobGroups.groupName}</option>
                          </c:forEach>--%>

					<c:forEach items="${jobGroups}" var="jobGroups">
						<c:if test="${jobGroups.groupDuty == 'selected'}">
							<option value="${jobGroups.groupCode}" selected>${jobGroups.groupName}</option>
						</c:if>
						<c:if test="${jobGroups.groupDuty == 'noSelected'}">
							<option value="${jobGroups.groupCode}">${jobGroups.groupName}</option>
						</c:if>
					</c:forEach>

				</optgroup>
			</select>
		</div>
	</div>


	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right  formsHead">经办人信息：</label>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="operatorUser">经办人</label>
		<div class="col-sm-4">
			<input type="text" name="operatorUser" id="operatorUser" placeholder="经办人" value="${taskjob.operatorUser}"
				   class="form-control ">
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="operatorPhone">经办人手机号</label>
		<div class="col-sm-4">
			<input type="text" name="operatorPhone" id="operatorPhone" placeholder="经办人手机号"
				   value="${taskjob.operatorPhone}" class="form-control ">
		</div>
	</div>

	<div class="form-group ">
		<label class="col-sm-2 control-label no-padding-right formsHead">责任人信息：</label>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="resUser">责任人</label>
		<div class="col-sm-4">
			<input type="text" name="resUser" id="resUser" placeholder="责任人" value="${taskjob.resUser}"
				   class="form-control ">
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="resPhone">责任人手机号</label>
		<div class="col-sm-4">
			<input type="text" name="resPhone" id="resPhone" placeholder="责任人手机号" value="${taskjob.resPhone}"
				   class="form-control ">
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="resDept">责任单位</label>
		<div class="col-sm-4">
			<input type="text" name="resDept" id="resDept" placeholder="责任单位" value="${taskjob.resDept}"
				   class="form-control ">
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right formsHead">督查组信息：</label>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="inspectors">督查组联系人</label>
		<div class="col-sm-4">
			<input type="text" name="inspectors" id="inspectors" placeholder="督查组联系人" value="${taskjob.inspectors}"
				   class="form-control ">
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="phones">督查联系人手机号</label>
		<div class="col-sm-4">
			<input type="text" name="phones" id="phones" placeholder="督查联系人手机号" value="${taskjob.phones}"
				   class="form-control ">
		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="supervisionResult">督查组反馈结果</label>
		<div class="col-sm-4">
			<c:choose>
				<c:when test="${empty taskjob.supervisionResult}">
					<input type="text" name="" id="supervisionResult" value="未反馈"
						   class="form-control " readonly>
				</c:when>
				<c:when test="${taskjob.supervisionResult == '1'}">
					<input type="text" name="" id="supervisionResult" value="已完成"
						   class="form-control " readonly>
				</c:when>
				<c:otherwise>
					<input type="text" name="" id="supervisionResult" value="未完成"
						   class="form-control " readonly>
				</c:otherwise>
			</c:choose>
		</div>

		<label class="col-sm-2 control-label no-padding-right" for="respResult">责任单位反馈结果</label>
		<div class="col-sm-4">
			<c:choose>
				<c:when test="${empty taskjob.respResult}">
					<input type="text" name="" id="respResult" value="未反馈"
						   class="form-control " readonly>
				</c:when>
				<c:when test="${taskjob.respResult == '1'}">
					<input type="text" name="" id="respResult" value="已完成"
						   class="form-control " readonly>
				</c:when>
				<c:otherwise>
					<input type="text" name="" id="respResult" value="未完成"
						   class="form-control " readonly>
				</c:otherwise>
			</c:choose>
		</div>
	</div>


	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="taskResult">任务最终结果</label>
		<div class="col-sm-4">
			<c:choose>
				<c:when test="${empty taskjob.taskResult}">
					<input type="text" name="" id="taskResult" value="未完成"
						   class="form-control " readonly>
				</c:when>
				<c:when test="${taskjob.taskResult == '1'}">
					<input type="text" name="" id="taskResult" value="已完成"
						   class="form-control " readonly>
				</c:when>
				<c:otherwise>
					<input type="text" name="" id="taskResult" value="未完成"
						   class="form-control " readonly>
				</c:otherwise>
			</c:choose>
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="isfeedbackToTack">是否反馈攻坚</label>
		<div class="col-sm-4">

			<c:choose>
				<c:when test="${empty taskjob.isfeedbackToTack}">
					<input type="text" name="isfeedbackToTack" id="isfeedbackToTack" value="未反馈"
						   class="form-control " readonly>
				</c:when>
				<c:otherwise>
					<input type="text" name="isfeedbackToTack" id="isfeedbackToTack" value="已反馈"
						   class="form-control " readonly>
				</c:otherwise>
			</c:choose>

		</div>
	</div>

	<div class="form-group">
		<label class="col-sm-2 control-label no-padding-right" for="supervisionScore">督查单位得分</label>
		<div class="col-sm-4">
			<input type="text" name="supervisionScore" id="supervisionScore" value="${taskjob.supervisionScore}"
				   class="form-control" readonly>
		</div>
		<label class="col-sm-2 control-label no-padding-right" for="respScore">责任单位得分</label>
		<div class="col-sm-4">
			<input type="text" name="respScore" id="respScore" value="${taskjob.respScore}"
				   class="form-control" readonly>
		</div>
	</div>
	<%--<div class="form-group">--%>
		<%--<label class="col-sm-2 control-label no-padding-right">督办要求列表</label>--%>
		<%--<div class="col-sm-4">--%>
			<%--<button class="btn btn-md btn-info" id="supervisionAskList">督查详情--%>
				<%--<span id="resNoRead" class="badge pull-right reds">!</span>--%>
			<%--</button>--%>
		<%--</div>--%>
		<%--<label class="col-sm-2 control-label no-padding-right">反馈信息列表</label>--%>
		<%--<div class="col-sm-4">--%>
			<%--<button class="btn btn-md btn-info" id="feedbackInfoList">反馈详情--%>
				<%--<span id="superNoRead" class="badge pull-right reds">!</span>--%>
			<%--</button>--%>
		<%--</div>--%>
	<%--</div>--%>

	<%--任务id  隐藏--%>
	<input type="text" id="taskId" value="${taskjob.sysId}" hidden>
	<form:hidden path="sysId"/>

</form:form>
<hr width="100%;height:2px;">
<div class="row" style="margin-left: 2px;">
	* 以上按住如此标志：<img src="/assets/web/img/zzc.png" alt="提示"/>可拖动调整相应输入框大小
</div>
<%--流程图表--%>
<script>
    /**
     *
     * @param p
     */
    function flowChart(p) {
        var datas = [{
            name: '任务生成',
            x: 0,
            y: 0
        }, {
            name: '任务开始',
            x: 50,
            y: 0
        }, {
            name: '任务执行中',
            x: 100,
            y: 0
        }, {
            name: '任务完成',
            x: 150,
            y: 20
        }, {
            name: '任务未完成',
            x: 150,
            y: -20
        }, {
            name: '反馈攻坚',
            x: 200,
            y: -50
        }, {
            name: '完成情况',
            x: 120,
            y: 30
        }, {
            name: '督查记录',
            x: 80,
            y: 30
        }, {
            name: '督查组需协调事项',
            x: 80,
            y: 60
        }, {
            name: '责任单位需协调事项',
            x: 120,
            y: 60
        }, {
            name: '督查得分',
            x: 230,
            y: 20
        }];

        var links = p.graph;
        //任务进行到某步球体变为绿色   1 = 蓝色   0 = 绿色
        var arr = p.green;
        for (var i = 0; i < datas.length; i++) {
            datas[i].category = arr[i];
        }
        var option = {
            // tooltip: {
            // },
            grid: {
                bottom: "5%",
                top: "5%"
            },
            //数据更新动画的时长。
            animationDurationUpdate: 1500,
            //数据更新动画的缓动效果。
            animationEasingUpdate: 'quinticInOut',
            color: "#2EABFF",
            series: [{
                animationDuration: 6000,
                type: 'graph',
                categories: [{
                    name: '',
                    itemStyle: {
                        normal: {
                            color: "#009800",
                        }
                    }
                }],
                layout: 'none',
                //节点大小
                symbolSize: [60, 60],
                //roam: true,
                //节点文字是否显示
                label: {
                    normal: {
                        show: true,
                    }
                },
                //指向箭头
                edgeSymbol: ['circle', 'arrow'],
                //edgeSymbolSize: [1, 10],
                //连接线文字大小
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                data: datas,
                links: links,
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                }
            }]
        };
        var myChart = echarts.init(document.getElementById('flowChart'));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    var taskId = '${taskjob.sysId}';//任务id
	console.log(taskId)
    $.ajax({
        url: "/missions/getTaskNodes",
        type: "POST",
        dataType: "json", //返回数据形式为json
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify({sysId: taskId}),
        success: function (res) {
            if (res.code == "200") {
                var item = res.data;
                flowChart(item);
            }
        }
    });

</script>

<script>
    //多选框
    $(function () {
        //督查组
        $(".inspectorType").change(function () {
            // $("#group-name").val($("#duchaGroup .fs-label").text());
        });
        $('.inspectorType').fSelect();

        //涉及部门
        $(".departments").change(function () {
            // $("#departments").val($("#depart .fs-label").text());
        });
        $('.departments').fSelect();

        //动态消息提示
        var resNoRead = '${resNoRead}';
        console.log(resNoRead);
        var superNoRead = '${superNoRead}';
        console.log(superNoRead);

        if ('${user.branchType}' == "4") {
            $("#resNoRead").css("display", "none");
            if (resNoRead != "1") {
                $("#superNoRead").css("display", "none");
            }
        } else {
            $("#superNoRead").css("display", "none");
            if (superNoRead != "1") {
                $("#resNoRead").css("display", "none");
            }
        }


    });

    //日期选择器
    jQuery(function ($) {
        $(".date-picker").datepicker({
            inline: true,
            format: "yyyymmdd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        }).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });
        var abc = ${bnpUser.branchType};
        if (abc == 4) {
            $("#groupId").attr("disabled", "disabled");
        }

    });
    // /**
    //  * 督查要求列表
    //  */
    // $("#supervisionAskList").click(function () {
    //     loadDialog({
    //         dialogTitle: '督查要求列表',
    //         dialogUrl: "/missions/supervisionAskList/" + $('#taskId').val(),
    //         dialogFoot: '<button type="button" class="btn btn-default" data-dismiss="modal" id="showDetail" onclick="myClose()">关闭</button>'
    //     });
    // });
    // /**
    //  * 反馈信息要求列表
    //  */
    // $("#feedbackInfoList").click(function () {
    //     loadDialog({
    //         dialogTitle: '反馈信息',
    //         dialogUrl: "/missions/feedbackInfoList/" + $('#taskId').val(),
    //         dialogFoot: '<button type="button" class="btn btn-default" data-dismiss="modal" id="showDetail" onclick="myClose()">关闭</button>'
    //     });
    // });

</script>
